<!--  -->
<template>
  <div class="cart">
    <div class="cart-header">
      <div>
        <i class="iconfont icon-dingwei"></i>
        上海市 上海市 浦东新区 潍坊新村街道
      </div>
      <div>编辑商品</div>
    </div>
    <div class="cart-goods">
      <div class="cart-group" v-for="(item, index) in shops" :key="item.ru_id">
        <div class="group-head">
          <div>
            <i
              class="iconfont"
              @click="shopSelect(index)"
              :class="item.flag ? 'icon-danxuanxuanzhong' : 'icon-danxuan'"
            ></i>
            <span>{{ item.rz_shop_name }}</span>
          </div>
          <div>领取优惠券</div>
        </div>
        <div class="cart-act">
          <em>满减</em>
          <span>已满￥1.00（立减￥0.52）</span>
          <a href="javascrip:;">再逛逛</a>
        </div>
        <div
          class="goods-item"
          v-for="(value, i) in item.goods"
          :key="value.goods_id"
        >
          <div class="icon" @click="selectBtn(index, i)">
            <i
              class="iconfont"
              :class="value.flag ? 'icon-danxuanxuanzhong' : 'icon-danxuan'"
            ></i>
          </div>
          <div class="goods-info">
            <div class="goods-img">
              <img :src="value.goods_thumb" alt="" />
            </div>
            <div class="goods-desc">
              <div class="goods-tit">{{ value.goods_name }}</div>
              <div class="goods-price">
                <p>￥{{ (value.shop_price * value.num).toFixed(2) }}</p>
                <div class="goods-num">
                  <span @click="value.num > 1 ? value.num-- : (value.num = 1)"
                    >-</span
                  >
                  <input type="text" v-model="value.num" />
                  <span @click="value.num++">+</span>
                  <i class="iconfont icon-jushoucang"></i>
                  <i
                    class="iconfont icon-shanchu1"
                    @click="deleteGood(item.ru_id, value.goods_id)"
                  ></i>
                </div>
              </div>
              <div class="goods-hd">
                <em>满减</em>
                <span>全场通用</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="no-goods" v-show="shops.length == 0">
        <img src="https://x.dscmall.cn/static/dist/img/cart-empty.png" alt="" />
        <p>您的购物车还是空空的，快去逛逛吧！</p>
      </div>
    </div>
    <div class="cart-like">
      <div>
        <div>猜你喜欢</div>
        <i></i>
      </div>
      <list :list="listData" />
    </div>
    <div class="cart-bar">
      <div class="left">
        <div class="selectAll" @click="selectAllBtn">
          <i
            class="iconfont"
            :class="selectAll ? ' icon-danxuanxuanzhong' : ' icon-danxuan'"
          ></i>
          <span>全选</span>
        </div>
        <div class="info">
          <p>
            合计<span>￥{{ priceSum.toFixed(2) }}</span>
          </p>
          <p>（不含运费，已节省0.00）</p>
        </div>
      </div>
      <div class="right">去结算</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import homeData from "@/mock/homeData.json";
import List from "@/views/home/components/homeIndex/list.vue";
import { mapGetters, mapState } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    List,
  },
  data() {
    //这里存放数据
    return {
      listData: homeData.data,
      selectAll: false,
      goodsList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {
    // priceSum() {
    //   return this.goodsList
    //     .reduce((sum, item, index) => {
    //       item.goods.forEach((value, i) => {
    //         if (value.flag) {
    //           sum += Number(value.price * value.num);
    //         }
    //       });
    //       return sum;
    //     }, 0)
    //     .toFixed(2);
    // },
    ...mapGetters(['priceSum']),
    ...mapState(["shops"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 删除与单选和   （店铺与全选）的联动
    heart(index) {
      // 判断是否所有商品选中
      let flag = this.shops[index].goods.every(
        (value) => {
          return value.flag;
        }
      );
      this.$store.commit('selectShopA',{index,flag})
      // // 判断是否所有店铺选中
      this.selectAll = this.shops.every((value) => {
        return value.flag;
      });
    },
    // 商品按钮的选中和取消操作
    selectBtn(index, i) {
      this.$store.commit('selectGood',{sindex:index,gindex:i})
      // this.goodsList[index].goods[i].flag =
      //   !this.goodsList[index].goods[i].flag;
      this.heart(index);
    },
    // 店铺选中取消
    shopSelect(index) {
      this.$store.commit('selectShop',index)
      // this.goodsList[index].flag = !this.goodsList[index].flag;
      this.shops[index].goods.forEach((item,i) => {
        // item.flag = this.goodsList[index].flag;
        this.$store.commit('selectGoodA',{index,i,flag:this.shops[index].flag})
      });
      this.selectAll = this.shops.every((value) => {
        return value.flag;
      });
    },
    // 全选选中取消
    selectAllBtn() {
      this.selectAll = !this.selectAll;
      this.shops.forEach((value,index) => {
        this.$store.commit('selectShopA',{index,flag:this.selectAll})
        // value.flag = this.selectAll;
        value.goods.forEach((val,i) => {
          val.flag = this.selectAll;
          this.$store.commit('selectGoodA',{index,i,flag:this.selectAll})
        });
      });
    },
    // 删除商品
    deleteGood(shop, good) {
      // 查找要删除的商品所在店铺的索引
      
      let shopIndex = this.shops.findIndex((value) => {
        console.log(value.ru_id);
        console.log(shop);
        return value.ru_id == shop;
        
      });
      // 查找要删除的商品的索引
      let goodIndex = this.shops[shopIndex].goods.findIndex(
        (value) => value.goods_id == good
      );
      // 删除商品
      this.$store.commit('deleteGoods', {sindex:shopIndex,gindex:goodIndex})
      // this.goodsList[shopIndex].goods.splice(goodIndex, 1);
      // 如果店铺商品为0就删除店铺
      if (this.shops[shopIndex].goods.length == 0) {
        // this.goodsList.splice(shopIndex, 1);
        this.$store.commit('deleteShop',shopIndex)
      } else {
        this.heart(shopIndex);
      }
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.cart {
  background-color: #f4f4f4;
  margin-bottom: 9.2rem;
  .cart-header {
    padding: 1.5rem 0.6rem;
    font-size: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cart-goods {
    .cart-group {
      margin: 0 0.6rem 1rem;
      background: #fff;
      border-radius: 1rem;
      padding: 1rem;
      .group-head {
        padding: 1.3rem 0;
        display: flex;
        justify-content: space-between;
      }
      .cart-act {
        width: 100%;
        padding: 0 0 1.3rem 3rem;
        box-sizing: border-box;
        em {
          height: 2rem;
          font-size: 1.2rem;
          line-height: 2rem;
          padding: 0 0.5rem;
          background-color: #f92028;
          color: #fff;
          text-align: center;
          border-radius: 1rem;
          margin-right: 1rem;
          float: left;
        }
        span {
          font-size: 1.2rem;
          display: block;
          width: calc(100% - 8rem);
          float: left;
        }
      }
      .goods-item {
        margin-bottom: 1.5rem;
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        .goods-info {
          display: flex;
          width: 100%;
          align-items: center;
          .goods-img {
            margin-left: 1rem;
            img {
              width: 7rem;
              height: 7rem;
            }
          }
          .goods-desc {
            flex: 1;
            margin-left: 1rem;
            height: 8.2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .goods-tit {
              line-height: 1.6;
              font-size: 1.4rem;
              word-break: break-all;
              overflow: hidden; //超出隐藏
              text-overflow: ellipsis; //溢出用省略号显示
              display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
              // 控制行数
              -webkit-line-clamp: 2; //超出两行隐藏
              -webkit-box-orient: vertical; // 从上到下垂直排列子元素
            }
            .goods-price {
              display: flex;
              width: 100%;
              justify-content: space-between;
              p {
                font-size: 15px;
                font-weight: 700;
                display: inline-block;
                color: rgb(242, 14, 40);
              }
              .goods-num {
                display: flex;
                align-items: center;
                span {
                  display: inline-block;
                  height: 2rem;
                  width: 2rem;
                  background-color: #f2f3f5;
                  text-align: center;
                  line-height: 2rem;
                }
                input {
                  width: 2rem;
                  height: 2rem;
                  background-color: #f2f3f5;
                  text-align: center;
                  line-height: 2rem;
                }
              }
            }
            .goods-hd {
              em {
                display: inline-block;
                height: 1.6rem;
                font-size: 1.2rem;
                line-height: 1.6rem;
                padding: 0 0.5rem;
                background-color: #f92028;
                color: #fff;
                text-align: center;
                border-radius: 1rem;
                margin-right: 1rem;
              }
            }
          }
        }
      }
    }
    .no-goods {
      margin: 0 1vw;
      background-color: #fff;
      border-radius: 0.5rem;
      overflow: hidden;
      text-align: center;
      padding-bottom: 4rem;
      width: 98vw;
      height: 25.5rem;
      box-sizing: border-box;
      padding-top: 5rem;
      img {
        width: 10rem;
        height: 10rem;
      }
    }
  }
  .cart-like {
    font-size: 2rem;
    text-align: center;
    position: relative;
    i {
      display: inline-block;
      height: 1px;
      width: 15rem;
      position: absolute;
      background-color: #ccc;
      left: calc(50% - 7.5rem);
      top: 1.5rem;
      z-index: -1;
    }
  }
  .cart-bar {
    height: 5rem;
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 4.8rem;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #dde2e7;
    .left {
      display: flex;
      flex: 1;
      justify-content: space-between;
      align-items: center;
      padding: 0 1rem;
      .info {
        text-align: right;
        p:nth-child(1) {
          font-size: 1.6rem;
          span {
            color: red;
          }
        }
        p:last-child {
          color: #999;
        }
      }
    }
    .right {
      width: 11rem;
      height: 5rem;
      text-align: center;
      line-height: 5rem;
      color: #fff;
      background-color: #ff4444;
    }
  }
}
.icon-danxuanxuanzhong {
  color: red;
}
</style>